<template>
	<body>
				<main>
					<div class="body-mall">
						<div class="wrapper">
							<div class="flex-row body-mall-top">
								<div class="flex-col-16">
									<h1>这是一座神奇的商城<i class="iconfont icon-shangquan"></i>。</h1>
									<p><i class="iconfont icon-shijian"></i>有着一个未知的数码世界,</p>
									<h3>和我们一起,</h3>
									<h2>开启一道新世界的大门,</h2>
									<h3>里面有无穷的宝贝<span class="iconfont icon-tishi"></span>等着你去<i class="iconfont icon-sousuo"></i>探索！</h3>
								</div>
								<div class="flex-col-8">
									<div class="box">
										<div class="film">
											<div class="face front">
												<img src="@/assets/img/iphone-card-40-iphone14pro-202209.png">
											</div>
											<div class="face back">
												<img src="@/assets/img/iphone-card-40-iphone14-202209.png">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="title">
								<h2>这里有几款绝世<i class="iconfont icon-shouji"></i>神机！</h2>
							</div>
							<div class="flex-row body-mall-mid">
								<div class="flex-col-4 body-mall-favourable">
									<div class="favourable">
										<i class="iconfont icon-youhuiquan"></i><h3>500</h3>
									<p>满2000减500</p>
									</div>
								</div>

                <!--嘻嘻嘻-->
								<div class="flex-col-5" v-for="list in cowryListByTree" :key="list.id">
									<div class="effect1">
										<div class="box3">
											<div class="box3-image">
												<img :src="'/src/' + list.imgPath">
											</div>
											<div class="box3-info">
												<h3 class="title">{{ list.name }}</h3>
												<span class="price">RMB {{ list.price }}</span>
												<!--<del class="text-muted">2249.00</del>-->
												<p class="brief" @click="addItem(list)"><a>加入购物车</a></p>
												<p class="shop-name brief" @click="addItem(list)"><a>立即下单</a></p>
											</div>
										</div>
									</div>
								</div>
                <!--嘻嘻嘻-->


							</div>
							<div class="flex-row body-mall-mid">
								
								<div class="flex-col-4 body-mall-favourable2">
									<div class="favourable2">
										<i class="iconfont icon-youhuiquan"></i><h3>100</h3>
										<p>满1000减100</p>
									</div>
								</div>
                <!--嘻嘻嘻-->
								<div class="flex-col-5" v-for="list in cowryListByFour" :key="list.id">
									<div class="effect2">
										<div class="box3">
											<div class="box3-image">
												<img :src="'/src/' + list.imgPath">
											</div>
											<div class="box3-info">
												<h3 class="title">{{ list.name }}</h3>
												<span class="price">RMB {{ list.price }}</span>
												<!--<del class="text-muted">100.00</del>-->
												<p class="brief" @click="addItem(list)"><a>加入购物车</a></p>
												<p class="shop-name brief" @click="addItem(list)"><a>立即下单</a></p>
											</div>
										</div>
									</div>
								</div>
                <!--嘻嘻嘻-->

							</div>
							<div class="title">
								<h2><i class="iconfont icon-shandian"></i>让你意想不到的商品。</h2>
							</div>
							<div class="flex-row body-mall-mid">

								<div class="flex-col-4 matebook" v-for="list in cowryListByFive" :key="list.id">
									<img :src="'/src/' + list.imgPath" style="width: 200px; height: 200px">
									<h3 class="title">{{ list.name }}</h3>
									<span class="price">RMB:{{ list.price }}</span>
                  <p class="brief" @click="addItem(list)"><a>加入购物车</a></p>
								</div>

							</div>
							<div class="title">
								<h2>小零件任你选<i class="iconfont icon-maiyizengyi"></i>。</h2>
							</div>
							<div class="flex-row body-mall-mid">

								<div class="flex-col-6 parts" v-for="list in cowryListBySix" :key="list.id">
									<img :src="'/src/' + list.imgPath" style="width: 200px; height: 200px">
                  <p class="brief" @click="addItem(list)"><a>加入购物车</a></p>
								</div>

							</div>
						</div>
					</div>
				</main>
		</body>
</template>

<script>
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";

  export default {
    data(){
      return{
        cowryListByTree: [],
        cowryListByFour: [],
        cowryListByFive: [],
        cowryListBySix: [],
      }
    },
    created() {
      this.listTree();
      this.listFour();
      this.listFive();
      this.listSix();
    },
    methods:{
      listTree(){
        request.get("/api/cowryList",{
          params:{
            status: 3
          }
        }).then(
            res => {
              if (res.code === "200"){
                this.cowryListByTree = res.data
              }
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      listFour(){
        request.get("/api/cowryList",{
          params:{
            status: 4
          }
        }).then(
            res => {
              if (res.code === "200"){
                this.cowryListByFour = res.data
              }
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      listFive(){
        request.get("/api/cowryList",{
          params:{
            status: 5
          }
        }).then(
            res => {
              if (res.code === "200"){
                this.cowryListByFive = res.data
              }
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      listSix(){
        request.get("/api/cowryList",{
          params:{
            status: 6
          }
        }).then(
            res => {
              if (res.code === "200"){
                this.cowryListBySix = res.data
              }
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      addItem(cowryItem){
        // console.log("cowry=", cowryItem);
        request.post("/api/addCartItem", cowryItem).then(
            res => {
              // console.log("res=", res);
              if (res.code === '200'){
                ElMessage({
                  message: res.msg,
                  type: 'success',
                })
              }else {
                ElMessage({
                  message: '添加失败',
                  type: 'error',
                })
              }
            }
        )
      }
    }
  }
</script>

<style>
.brief a:hover{
  background-color: #f1ebe2;
  border-radius: 5px;
}
</style>